<template>
  <view class="main-box">
    <z-paging ref="paging" v-model="data.bankBankList" @query="getBanKList" refresher-enabled>
      <van-sticky>
        <view class="w-full flex items-center bg-white">
          <view class="w-80%">
            <van-search
              @search="onSearch"
              @change="
                (e: any) => {
                  data.bankName = e.detail;
                }
              "
              :value="data.bankName"
              placeholder="请输入搜索关键词"
            >
            </van-search>
          </view>
          <view class="w-20%">
            <van-button type="primary" @click="onSearch" size="small">搜索</van-button>
          </view>
        </view>
      </van-sticky>
      <view class="c-pd">
        <van-cell-group>
          <van-cell :border="false" clickable :title="item.bankName" @click="returnBankCode(item)" :label="item.bankCode" v-for="(item, index) in data.bankBankList" :key="index" />
        </van-cell-group>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import UserRequest from '@/request/userRequest';
import { navigate } from '@/utils/navigate';

interface IData {
  pages: {
    pageNo: number;
    pageSize: number;
    totalPage: number;
  };
  bankBankList: IBankList[];
  bankName: string;
}

const data = reactive<IData>({
  pages: {
    pageNo: 1,
    pageSize: 20,
    totalPage: 1,
  },
  bankBankList: [],
  bankName: '',
});

const paging = ref();

const getBanKList = (pageNo: number, pageSize: number) => {
  UserRequest.GetBankList({ pageNo, pageSize, bankName: data.bankName, hasLoading: true })
    .then((res) => {
      paging.value.complete(res.data.list);
    })
    .catch((err) => {
      paging.value.complete(false);
    });
};

const onSearch = () => {
  paging.value.reload();
};

const returnBankCode = (item: IBankList) => {
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 2];
  prevPage.$vm.bankName = item.bankName;
  prevPage.$vm.bankCode = item.bankCode;
  navigate({ url: '', type: 'navigateBack' });
};
</script>

<style lang="scss" scoped>
.main-box {
  .c-pd {
    :deep(.van-cell) {
      margin-bottom: 24rpx;
      border-radius: 16rpx;
    }
  }
}
</style>
